<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Widget Enter Password Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<style>
  #area .widget { margin: 5px 0;}
  #area textarea { height: 20px; }
  #area input[type=input] { width: 120px !important; }
  #area input { width: 20px; }
  #area input[id="password"] { width: 120px; }
  #area input[id="verify"] { width: 120px; }
  #subbtn { margin: 0 7px; }
  /* 160 + 160 + 50 + 30 */
  #wrap,
  #sync-task-cover {
    height: 400px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 74px;
    padding: 3px;
  }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/ui_utils.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // 2000 seconds

var ELEMENT_NAMES = ['radio', 'checkbox', 'text', 'textarea', 'button'];
var ELEMENT_HTML = {
  'radio': {'start': '<div class="widget"><label><input type="radio" data-type="radio" name="radio">',
    'end': '</label></div>'},
  'checkbox': {'start':' <div class="widget"><label><input type="checkbox" data-type="checkbox">',
    'end':'</label></div>'},
  'text': {'start': '<div class="widget"><input type="input" data-type="text" value="',
    'end':'"></div>'},
  'textarea': {'start':'<div class="widget"><textarea data-type="textarea">',
    'end':'</textarea></div>'},
  'button': {'start': '<div class="widget"><button data-type="button">',
    'end':'</button></div>'}
};
var NUM_ELEMENTS = 5;

var createWidgets = function(){
  // generate query text in the UI
  var elements = []
  for(var i=0;i<NUM_ELEMENTS;i++){
    randIndex = core.randi(0,ELEMENT_NAMES.length);
    var elemName = ELEMENT_NAMES[randIndex];
    var randomText = ui_utils.generateString(1,6);
    $('#area').append(ELEMENT_HTML[elemName]['start'] + randomText + ELEMENT_HTML[elemName]['end']);
    elements.push(elemName);
  }

  return elements;
}

var genProblem = function() {
  var widget_state = -1.0;
  var div = d3.select('#area');
  div.html('');  // clear previous problem, if any  
  var elements = createWidgets();
  var chosenElement = core.sample(elements);
  $('#area .widget').on('click', function(){
    var elemType = $(this).find('input, textarea, button')[0].getAttribute('data-type');
    widget_state = elemType === chosenElement ? 1.0 : -1.0;
  });

  div.append('div').attr('id', 'form');
  var form = d3.select('#form');
  form.html('<p><label>Password</label><input type="password" id="password"></p><p><label>Verify password</label><input type="password" id="verify"></p><button id="subbtn" class="secondary-action">Submit</button>');

  d3.select('#password')[0][0].value ='';
  d3.select('#verify')[0][0].value ='';

  var password = ui_utils.generateString(2,6);

  // reward awarder
  d3.select('#subbtn').on('click', function(){
    var p = d3.select('#password')[0][0].value;
    var v = d3.select('#verify')[0][0].value;
    var r = (p === password && v === password) ? 1.0 : -1.0;
    if (widget_state == 1.0) {
      core.endEpisode(r, r > 0);
    } else {
      core.endEpisode(-1.0);
    }
  });

  // instruction
  // d3.select('#query').html('Click on a "' + chosenElement + '" widget, and then enter the password "<span class="bold">' + password + '</span>" into both text fields and press submit.');
  d3.select('#query').html('Enter the password "<span class="bold">' + password + '</span>" into both text fields and press submit, after clicking on a "' + chosenElement + '" widget.');
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area"></div>
</div>
</body>
</html>
